<template>
  <div class="splash-screen" :class="{ 'fade-out': isFadingOut }"><!-- 主容器，添加淡出效果类 -->
    <!-- 背景动画元素 -->
    <div class="background-animation">
      <div v-for="i in 30" :key="'circle-' + i" class="bg-circle" :style="{
        left: `${Math.random() * 100}%`,
        top: `${Math.random() * 100}%`,
        width: `${Math.random() * 300 + 50}px`,
        height: `${Math.random() * 300 + 50}px`,
        animationDelay: `${Math.random() * 5}s`,
        animationDuration: `${Math.random() * 10 + 10}s`,
        backgroundColor: `rgba(${Math.floor(Math.random() * 100)}, ${Math.floor(Math.random() * 150) + 100}, ${Math.floor(Math.random() * 255)}, 0.1)`
      }"></div>

      <!-- 数字雨效果 -->
      <div class="matrix-rain">
        <div v-for="i in 20" :key="'rain-' + i" class="matrix-column" :style="{
          left: `${i * 5}%`,
          animationDelay: `${Math.random() * 2}s`
        }">
          <div v-for="j in 15" :key="'char-' + i + '-' + j" class="matrix-char" :style="{
            animationDelay: `${Math.random() * 5}s`,
            animationDuration: `${Math.random() * 2 + 1}s`,
            color: `rgba(${100 + Math.random() * 155}, ${200 + Math.random() * 55}, ${100 + Math.random() * 155}, ${0.3 + Math.random() * 0.7})`
          }">{{ getRandomChar() }}</div>
        </div>
      </div>
    </div>

    <!-- 网格背景 -->
    <div class="grid-background">
      <!-- 动态网格线 -->
      <div v-for="i in 20" :key="'grid-h-' + i" class="grid-line horizontal"
        :style="{ top: `${i * 5}%`, opacity: Math.random() * 0.3 + 0.05 }"></div>
      <div v-for="i in 20" :key="'grid-v-' + i" class="grid-line vertical"
        :style="{ left: `${i * 5}%`, opacity: Math.random() * 0.3 + 0.05 }"></div>

      <!-- 电路图案 -->
      <div class="circuit-pattern">
        <div class="circuit-path" style="top: 20%; left: 10%; width: 15%; height: 2px;"></div>
        <div class="circuit-path" style="top: 20%; left: 25%; height: 15%; width: 2px;"></div>
        <div class="circuit-path" style="top: 35%; left: 10%; width: 15%; height: 2px;"></div>
        <div class="circuit-node" style="top: 20%; left: 25%;"></div>

        <div class="circuit-path" style="bottom: 20%; right: 10%; width: 15%; height: 2px;"></div>
        <div class="circuit-path" style="bottom: 20%; right: 25%; height: 15%; width: 2px;"></div>
        <div class="circuit-path" style="bottom: 35%; right: 10%; width: 15%; height: 2px;"></div>
        <div class="circuit-node" style="bottom: 20%; right: 25%;"></div>
      </div>
    </div>

    <!-- Logo容器 -->
    <div class="logo-container" :class="{ 'logo-fade': isFadingOut }"><!-- Logo淡出效果类 -->
      <div class="logo-scan-line"></div> <!-- 扫描线效果 -->
      <div class="logo-wrapper" :style="{
        transform: `rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${logoScale})`
      }"><!-- 3D变换效果 -->
        <img src="/Vistara-AI.png" alt="Vistara AI" class="logo" />
        <div class="logo-glow"></div><!-- Logo发光效果 -->
        <div class="logo-circuit"></div> <!-- Logo电路边框 -->
      </div>
      <h1 class="logo-text" :style="{ letterSpacing: logoSpacing + 'px' }"><!-- 文字间距动画 -->
        <span v-for="(char, index) in 'Vistara AI'" :key="index" :style="{
          opacity: charOpacity[index],
          transform: `translateY(${charY[index]}px)`,
          textShadow: `0 0 5px hsl(${hue + index * 10}, 100%, 70%), 0 0 10px hsl(${hue + index * 10}, 100%, 50%)`
        }">{{ char }}</span><!-- 文字逐个显示效果 -->
      </h1>
      <p class="tagline" :style="{ opacity: taglineOpacity, textShadow: `0 0 5px hsl(${hue}, 100%, 70%)` }">
        <!-- 标语淡入效果 -->
        智抓视界，慧创未来
      </p>

    </div>

    <!-- 进度条 -->
    <div class="progress-container">
      <div class="progress-bar" :style="{
        width: progress + '%',
        background: `linear-gradient(90deg, hsl(${hue}, 100%, 50%), hsl(${hue + 60}, 100%, 50%), hsl(${hue + 120}, 100%, 50%))` // 增强渐变效果
      }">
        <div class="progress-shine"></div><!-- 进度条光泽动画 -->
        <div v-for="i in 20" :key="'bar-segment-' + i" class="progress-segment" :style="{
          left: `${i * 5 - 2.5}%`,
          opacity: progress >= i * 5 ? 1 : 0,
          height: `${Math.random() * 4 + 8}px`, // 随机高度
          top: `${Math.random() * 2}px` // 随机位置
        }"></div>
      </div>
      <div class="progress-text" :style="{
        color: `hsl(${hue}, 100%, 70%)`,
        textShadow: `0 0 10px hsl(${hue}, 100%, 50%)`
      }">{{ Math.round(progress) }}%</div><!-- 进度百分比 -->
    </div>

    <!-- 粒子效果容器 -->
    <div class="particles-container" ref="particlesContainer"></div>
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineEmits, nextTick } from 'vue';

// 定义属性
const props = defineProps({
  showSplash: {
    type: Boolean,
    default: true
  }
});

// 定义发出的事件
const emit = defineEmits(['splash-closed']);

// 响应式变量
const progress = ref(0);          // 进度值
const rotateY = ref(0);           // Y轴旋转角度
const rotateX = ref(0);           // X轴旋转角度
const logoScale = ref(1);         // Logo缩放
const logoSpacing = ref(2);       // 文字间距
const isFadingOut = ref(false);   // 是否淡出
const hue = ref(200);             // 颜色色调
const taglineOpacity = ref(0);    // 标语透明度
const particlesContainer = ref<HTMLDivElement | null>(null); // 粒子容器

// 文字动画变量
const charOpacity = ref<number[]>([]);
const charY = ref<number[]>([]);
const text = 'Vistara AI';

// 初始化文字动画数组
for (let i = 0; i < text.length; i++) {
  charOpacity.value[i] = 0;
  charY.value[i] = 20;
}

// 生成随机字符（数字、字母、符号）
const getRandomChar = () => {
  const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
  return chars[Math.floor(Math.random() * chars.length)];
};

// 创建粒子爆炸效果
const createParticles = () => {
  if (!particlesContainer.value) return;

  // 清除旧粒子
  particlesContainer.value.innerHTML = '';

  // 创建新粒子
  for (let i = 0; i < 100; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');

    // 随机位置、大小和颜色
    const size = Math.random() * 6 + 2;
    const angle = Math.random() * Math.PI * 2;
    const distance = Math.random() * 100 + 50;
    const x = Math.cos(angle) * distance;
    const y = Math.sin(angle) * distance;

    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.backgroundColor = `hsl(${hue.value + Math.random() * 60}, 100%, 50%)`;
    particle.style.left = '50%';
    particle.style.top = '50%';
    particle.style.boxShadow = `0 0 ${size * 2}px hsl(${hue.value + Math.random() * 60}, 100%, 50%)`;

    particlesContainer.value.appendChild(particle);

    // 动画效果
    setTimeout(() => {
      particle.style.transform = `translate(${x}px, ${y}px)`;
      particle.style.opacity = '0';
    }, 10);
  }

  // 清除粒子
  setTimeout(() => {
    if (particlesContainer.value) {
      particlesContainer.value.innerHTML = '';
    }
  }, 1000);
};

// 模拟加载进度
const simulateLoading = () => {
  const interval = setInterval(() => {
    // 随机增加进度
    const increment = Math.random() * 5 + 0.5;
    progress.value = Math.min(progress.value + increment, 100);

    // 改变色调
    hue.value = 200 + Math.floor(progress.value * 0.4);

    // 进度达到100%时
    if (progress.value >= 100) {
      progress.value = 100;
      clearInterval(interval);

      // 创建粒子效果
      nextTick(() => {
        createParticles();
      });

      // 延迟后开始淡出
      setTimeout(() => {
        isFadingOut.value = true;
        logoScale.value = 0.8;
        logoSpacing.value = 8;

        // 淡出动画结束后发出事件
        setTimeout(() => {
          emit('splash-closed');
        }, 1000);
      }, 500);
    }
  }, 200);

  return interval;
};

// 开始3D旋转动画
const startRotation = () => {
  // 计算旋转总时间（假设加载过程需要3秒）
  const totalRotationTime = 3000; // 3秒
  const targetRotation = 380; // 目标旋转角度
  const frames = 60; // 每秒60帧
  const totalFrames = (totalRotationTime / 1000) * frames;
  const degreesPerFrame = targetRotation / totalFrames;
  let currentFrame = 0;

  const interval = setInterval(() => {
    currentFrame++;
    // 计算当前旋转角度
    rotateY.value = degreesPerFrame * currentFrame;
    rotateX.value = Math.sin(rotateY.value * Math.PI / 180) * 10;

    // 当达到目标角度或加载完成时停止旋转
    if (currentFrame >= totalFrames || progress.value >= 100) {
      clearInterval(interval);
    }
  }, 1000 / frames); // 约16.67ms每帧

  return interval;
};

// 文字动画
const startTextAnimation = () => {
  // 逐个显示文字
  text.split('').forEach((_, index) => {
    setTimeout(() => {
      charOpacity.value[index] = 1;
      charY.value[index] = 0;
    }, 100 + index * 150);
  });

  // 显示标语
  setTimeout(() => {
    taglineOpacity.value = 1;
  }, 1500);
};

// 组件挂载时
onMounted(() => {
  const progressInterval = simulateLoading();
  const rotationInterval = startRotation();
  startTextAnimation();

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(progressInterval);
    clearInterval(rotationInterval);
  });
});
</script>

<style scoped>
/* 主容器样式 */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: #0a0a1a;
  overflow: hidden;
  font-family: 'Rajdhani', 'Orbitron', sans-serif;
}

/* 淡出动画 */
.fade-out {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* 背景动画 */
.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  animation: float 8s infinite ease-in-out;
  filter: blur(40px);
}

/* 数字雨效果 */
.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.15;
}

.matrix-column {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: rain-fall linear infinite;
}

.matrix-char {
  font-size: 14px;
  opacity: 0;
  animation: char-fade-in-out ease-in-out infinite;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* 网格背景 */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
}

/* 动态网格线 */
.grid-line {
  position: absolute;
  background-color: rgba(66, 153, 225, 0.3);
  animation: grid-pulse 3s infinite ease-in-out;
}

.horizontal {
  width: 100%;
  height: 1px;
}

.vertical {
  height: 100%;
  width: 1px;
}

/* 电路图案 */
.circuit-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.circuit-path {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(66, 153, 225, 0.5), transparent);
}

.circuit-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(66, 153, 225, 0.7);
  box-shadow: 0 0 10px rgba(66, 153, 225, 0.7);
  animation: node-pulse 2s infinite;
}

/* Logo容器 */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px; /* 调整下边距，适应更大的Logo */
  position: relative;
  z-index: 2;
  width: 100%; /* 确保容器宽度为100% */
  padding: 0 10%; /* 添加内边距，防止Logo贴边 */
  box-sizing: border-box;
}

/* Logo淡出效果 */
.logo-fade {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Logo扫描线 */
.logo-scan-line {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: scan 3s infinite linear;
  z-index: 3;
}

/* Logo包装器 */
.logo-wrapper {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.1s linear;
}

/* Logo图片 */
.logo {
  width: 80vw; /* 设置为屏幕宽度的80% */
  height: auto; /* 高度自动，保持比例 */
  max-width: 800px; /* 添加最大宽度限制，防止在大屏幕上过大 */
  object-fit: contain;
  z-index: 2;
  position: relative;
}

/* Logo发光效果 */
.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105%; /* 稍微大于Logo，营造发光效果 */
  height: 105%;
  background: radial-gradient(circle, rgba(66, 153, 225, 0.6) 0%, rgba(66, 153, 225, 0) 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: pulse 2s infinite;
}

/* Logo电路边框 */
.logo-circuit {
  position: absolute;
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
  border: 1px solid rgba(66, 153, 225, 0.5);
  border-radius: 10px;
  z-index: 1;
  box-shadow: 0 0 20px rgba(66, 153, 225, 0.3);
}

/* Logo文字 */
.logo-text {
  font-size: 60px;
  /* 从48px放大到60px */
  font-weight: 800;
  color: #fff;
  margin-top: 40px;
  /* 增加上边距 */
  letter-spacing: 2px;
  transition: letter-spacing 1s ease-out;
}

/* 文字单个字符样式 */
.logo-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 标语样式 */
.tagline {
  font-size: 24px;
  /* 从20px放大到24px */
  color: rgba(255, 255, 255, 0.7);
  margin-top: 20px;
  /* 增加上边距 */
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* 技术指标 */
/* 删除这部分样式 */
.tech-specs {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(66, 153, 225, 0.3);
  padding-top: 10px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spec-label {
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spec-value {
  font-size: 14px;
  font-weight: bold;
  color: hsl(200, 100%, 70%);
}

/* 进度条容器 */
.progress-container {
  width: 500px;
  /* 增加宽度 */
  height: 15px;
  /* 增加高度 */
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  /* 增加圆角 */
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(66, 153, 225, 0.2);
  z-index: 2;
  border: 1px solid rgba(66, 153, 225, 0.3);
}

/* 进度条 */
.progress-bar {
  height: 100%;
  position: relative;
  transition: width 0.3s ease;
}

/* 进度条光泽效果 */
.progress-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shine 1.5s infinite;
  /* 加快动画速度 */
}

/* 进度条分段效果 */
.progress-segment {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease, height 0.3s ease, top 0.3s ease;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 进度百分比文字 */
.progress-text {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
  /* 增加字体大小 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 3;
}

/* 粒子容器 */
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  overflow: hidden;
}

/* 粒子样式 */
.particle {
  position: absolute;
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 1s ease-out, opacity 1s ease-out;
  z-index: 5;
}

/* 动画定义 */
@keyframes float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-30px) scale(1.1);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes scan {
  0% {
    top: -10%;
  }

  100% {
    top: 110%;
  }
}

@keyframes grid-pulse {

  0%,
  100% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes node-pulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(66, 153, 225, 0.7);
  }

  50% {
    box-shadow: 0 0 20px rgba(66, 153, 225, 0.9);
  }
}

@keyframes rain-fall {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(200%);
  }
}

@keyframes char-fade-in-out {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}
</style>